<template>
  <div>
    <div class="asideTitle"><p>{{$t('m.home.abnormal')}}</p><span>{{$t('m.home.tips')}}</span></div>
      <div class="asideTab">
          <el-button :class="{bg:btn == 1}" @click="handleSwitchComponent(1)">
            <p>{{$t('m.home.overtimearrival')}}</p>
            <p>{{arrivalNoticeData.expiredarrivalnoticeamount}}</p>
            <el-divider></el-divider>
            <el-row>
              <el-col style="margin:3px 0 0 -2px" :span="8">
                <span>
                {{$t('m.home.punctualityrate')}}
                </span>
              </el-col>
              <el-col :span="16">
                <el-progress :text-inside="true" :stroke-width="20" :percentage="arrivalNoticeData.expiredarrivalnoticeratio">
                </el-progress>
              </el-col>
            </el-row>
            <el-tooltip placement="bottom">
              <div slot="content">{{$t('m.home.tips45')}}<br/>{{$t('m.home.tips46')}}<br/>{{$t('m.home.tips47')}}</div>
              <i class="el-icon-warning-outline"></i>
            </el-tooltip>
          </el-button>
          <el-button :class="{bg:btn == 2}" @click="handleSwitchComponent(2)">
            <p>{{$t('m.home.overtimetally')}}</p>
            <p>{{singinData.expiredsigninamount}}</p>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="8">
                <span>
                {{$t('m.home.timeoutratio')}}
                </span>
              </el-col>
              <el-col :span="16">
                <el-progress :text-inside="true" :stroke-width="20" :percentage="singinData.expiredsigninratio">
                </el-progress>
              </el-col>
            </el-row>
            <el-tooltip placement="bottom">
              <div slot="content">{{$t('m.home.tips48')}}<br/>{{$t('m.home.tips49')}}</div>
              <i class="el-icon-warning-outline"></i>
            </el-tooltip>
          </el-button>
          <el-button :class="{bg:btn == 3}" @click="handleSwitchComponent(3)">
            <p>{{$t('m.home.timeouttask')}}</p>
            <p>{{shelvesTaskData.expiredshelveamount}}</p>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="8">
                <span>
                {{$t('m.home.timeoutratio')}}
                </span>
              </el-col>
              <el-col :span="16">
                <el-progress :text-inside="true" :stroke-width="20" :percentage="shelvesTaskData.expiredshelveratio">
                </el-progress>
              </el-col>
            </el-row>
            <el-tooltip placement="bottom">
              <div slot="content">{{$t('m.home.tips50')}}<br/>{{$t('m.home.tips51')}}</div>
              <i class="el-icon-warning-outline"></i>
            </el-tooltip>
          </el-button>
        </div>
      <div class="asideTable">
        <!-- 未准期到货通知单table数据展示 start -->
          <template v-if="btn===1">
            <arrivalTable></arrivalTable>
          </template>
       <!-- 未准期到货通知单table数据展示 end -->

       <!-- 理货超时SKU数table数据展示 start -->
          <template v-if="btn===2">
            <inboundSkuTable></inboundSkuTable>
          </template>
       <!-- 理货超时SKU数table数据展示 end -->

       <!-- 上架超时任务数table数据展示 start -->
          <template v-if="btn===3">
            <taskTable></taskTable>
          </template>
       <!-- 上架超时任务数table数据展示 end -->
      </div>
	</div>
</template>
<script>
export default {
  name:'inbound-abnormal-dashboard',
  data(){
    return {
      btn:1,

      arrivalNoticeData:[],
      singinData:[],
      shelvesTaskData:[]
    }
  },
  mounted(){
    this.getArrivalNoticeExpired()
    this.getSigninExpired()
    this.getShelveExpired()
  },
  components:{
    arrivalTable:()=>import('@/components/home/inbound/inbound-arrival-table'),
    inboundSkuTable:()=>import('@/components/home/inbound/inbound-sku-table'),
    taskTable:()=>import('@/components/home/inbound/inbound-task-table')
  },
  methods:{

    handleSwitchComponent(btn){
      this.btn=btn
    },
    // 获取到货通知单超时统计
    getArrivalNoticeExpired(){
      let options = {
        method:'get',
        url:`/homepage/arrivalnoticeexpiredstatistics`
      }
      this.$axios(options).then(({ data }) => {
        this.arrivalNoticeData = data
      })
    },
    // 获取理货单超时统计
    getSigninExpired(){
      let options = {
        method:'get',
        url:`/homepage/signinexpiredstatistics`
      }
      this.$axios(options).then(({ data }) => {
        this.singinData = data
      })
    },
    // 获取理上架超时统计
    getShelveExpired(){
      let options = {
        method:'get',
        url:`/homepage/shelveexpiredstatistics`
      }
      this.$axios(options).then(({ data }) => {
        this.shelvesTaskData = data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .asideTitle {
    display: flex;
    justify-content: space-between;
    p {
      font-size: 20px;
      font-weight: bold;
      margin-top: 18px;
      margin-left: 30px;
      margin-bottom: 12px;
    }
    span {
      color: #d9001b;
      font-size: 16px;
      margin-top: 20px;
      margin-right: 26px;
    }
  }
  .asideTab {
    display: flex;
    .el-button {
      width: 32%;
      height: 160px;
      margin-left: 6px;
      position: relative;
      .el-icon-warning-outline {
        position: absolute;
        top: 8px;
        right: 6px;
      }
      p:nth-child(1) {
        font-size: 16px;
        margin-top: -9px;
        margin-bottom: 12px;
      }
      p:nth-child(2) {
        font-size: 26px;
      }
      .el-row .el-col span {
        margin-left: -5px;
        font-size: 13px;
      }
      .el-progress {
        margin-left: 5px;
        margin-top: 3px;
        width: 106%;
      }
    }
    .bg{
      background-color: #ec808d;
      color: #FFF;
    }
  }
  .el-divider {
    margin-top: 12px;
    margin-bottom: 18px;
  }
  .asideTable {
    margin: 10px;
  }
</style>